<template>
	<view>
		<u-tabs-swiper @change="change" bg-color="#FAFAFA" :current="current" activeColor="#FE4D21" ref="tabs"
			:list="list" :is-scroll="false">
		</u-tabs-swiper>
		<view class="content">
			<view v-if="datalist.length>0">
				<view class="list" v-if="current==0" v-for="(item,index) in datalist" :key="index">
					<view class="title">
						<view class="left">
							{{item.orderno}}
						</view>
						<view class="right">
							{{item.text}}
						</view>
					</view>
					<view class="goods" v-for="(a,b) in item.details" :key="b">
						<image :src="img_pre+a.cover" class="head"></image>
						<view class="data">
							<view class="name omit2">
								{{a.pname}}
							</view>
							<view class="number">
								<view class="left">
									<view class="icon2">
										{{a.specs_ename}}
									</view>
								</view>
							</view>
							<view class="money">
								{{a.price}}<text>蜂钻</text>
							</view>
						</view>
					</view>
					<view class="buttom" v-if="item.state!=4">
						<u-button type="primary" v-if="item.state==3" class="b1 button">查看物流</u-button>
						<u-button type="primary" v-if="item.state==3" style="margin-left:0;"
							@click="receive(item.orderno,index)" class="b2 button">确认收货</u-button>
						<u-button type="primary" @click="toast('提醒发货成功，客服会尽快安排发货')" v-if="item.state==2"
							class="b2 button">
							提醒发货</u-button>
					</view>
				</view>
				<view class="list" v-if="current!=0&&item.state==status" v-for="(item,index) in datalist" :key="index">
					<view class="title">
						<view class="left">
							{{item.orderno}}
						</view>
						<view class="right">
							{{item.text}}
						</view>
					</view>
					<view class="goods" v-for="(a,b) in item.details" :key="b">
						<image :src="img_pre+a.cover" class="head"></image>
						<view class="data">
							<view class="name omit2">
								{{a.pname}}
							</view>
							<view class="number">
								<view class="left">
									<view class="icon2">
										{{a.specs_ename}}
									</view>
								</view>
							</view>
							<view class="money">
								{{a.price}}<text>蜂钻</text>
							</view>
						</view>
					</view>
					<view class="buttom" v-if="item.state!=4">
						<u-button type="primary" @click="ems(item,index)" v-if="item.state==3" class="b1 button">查看物流
						</u-button>
						<u-button type="primary" v-if="item.state==3" style="margin-left:0;"
							@click="receive(item.orderno,index)" class="b2 button">确认收货</u-button>
						<u-button type="primary" v-if="item.state==2" class="b2 button">提醒发货</u-button>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						你还没有相关的订单~
					</view>
				</view>
			</view>
		</view>
		<u-keyboard mode="number" :dot-enabled="false" v-model="payshow" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
		<u-popup v-model="show" close-icon-pos="top-left" :closeable="true" borderRadius="10" mode="bottom">
			<view class="logistics">
				<view class="_view">
					<view class="title">
						物流信息
					</view>
					<view class="logistics-content">
						<view class="list">
							<view class="icon"></view>
							<view class="right">
								<view>
									快递公司:{{json.express_name}}
								</view>
								<view>
									快递单号:{{json.express_number}}
								</view>
								<view>
									发出时间:{{json.stime}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<button type="default" class="button" @click="show=false">我知道了</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				page: 1,
				datalist: [],
				current: 0,
				orderno: "",
				show: false,
				content: '是否确认收货',
				index: 0,
				status: 0,
				password: "",
				payshow: false,
				json: {
					express_name: "",
					express_number: "",
					stime: ""
				}
			}
		},
		onLoad(option) {
			than = this;
			than.getList();
		},
		onReachBottom() {
			than.page++
			than.getList()
		},
		methods: {
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
				if (this.password.length >= 6) {
					than.logout();
				}
			},
			change(e) {
				than.current = e;
				than.getList()
			},
			ems(item) {
				than.json = item;
				than.show = true;
			},
			receive(orderno, index) {
				than.orderno = orderno;
				than.index = index;
				than.payshow = true;
			},
			logout() {
				than.post('api/Product_order/receive', {
					orderno: than.orderno,
					password: than.password
				}, function(data) {
					than.datalist[than.index].state = 4
					than.password = "";
					than.payshow = false;
					than.toast("收货成功")
				})
			},
			getList() {

				switch (than.current) {
					case 0:
						than.status = 0
						break;
					case 1:
						than.status = 2
						break;
					case 2:
						than.status = 3
						break;
					case 3:
						than.status = 4
						break;
					default:
						break;
				}
				than.post("api/Product_order/orderList", {
					page: than.page,
					status: than.status
				}, function(data) {
					for (let i in data) {
						var a = data[i];
						switch (a.state) {
							case 2:
								a.text = "买家已付款"
								break;
							case 3:
								a.text = "卖家已发货"
								break;
							case 4:
								a.text = "交易成功"
								break;
							default:
								break;
						}
					}
					if (than.page == 1) {
						than.datalist = data;
					} else {
						than.datalist = than.datalist.concat(data)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.logistics {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx 30rpx;
			padding-bottom: 20rpx;

			.title {
				height: 111rpx;
				line-height: 111rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.appeal {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.logistics-content {
				padding: 94rpx 39rpx 40rpx;

				.list {
					display: flex;
					align-items: center;
					height: 240rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					margin-bottom: 15rpx;
					color: #666666;

					.icon {
						width: 20rpx;
						height: 20rpx;
						margin: auto 60rpx;
						background: #FB683D;
						border-radius: 10rpx;
					}

					.right {
						text-align: left;

						view {
							height: 45rpx;
						}
					}
				}
			}
		}

		.button {
			margin: 36rpx auto 0;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			line-height: 80rpx;
		}
	}

	.content {
		padding-top: 24rpx;

		.list {
			margin: 0 36rpx 20rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;

			.title {
				height: 104rpx;
				line-height: 104rpx;
				padding: 0 24rpx;
				border-bottom: 2rpx solid #F7F7F7;
				display: flex;
				align-items: center;

				.left {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 1);
				}

				.right {
					margin-left: auto;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FE4D21;
				}
			}

			.buttom {
				display: flex;
				height: 110rpx;
				align-items: center;

				.button {
					padding: 17rpx 18rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					height: 60rpx;
					border-radius: 30rpx;
				}

				.b1 {
					margin-right: 24rpx;
					color: #666666;
					background: #FFFFFF;
					border: 1rpx solid #B5B5B5;
					border-radius: 30rpx;
				}

				.b2 {
					color: #FFFFFF;
					background: linear-gradient(90deg, #FFA800, #F46813);
					margin-right: 24rpx;
				}
			}

			.goods {
				height: 240rpx;
				display: flex;
				align-items: center;
				padding: 0 24rpx;

				.head {
					width: 168rpx;
					height: 168rpx;
				}

				.data {
					margin-left: 23rpx;
					width: 440rpx;

					.name {
						height: 80rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					.number {
						display: flex;
						align-items: center;

						.left {
							.icon2 {
								padding: 5rpx 27rpx;
								background: #F8F8F8;
								border: 1rpx solid #DCDCDC;
								border-radius: 19rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
						}

						.right {
							margin-left: auto;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(102, 102, 102, 1);
						}
					}
				}

				.money {
					margin-left: auto;

					text {
						margin-left: 8rpx;
						font-size: 24rpx;
					}

					font-size:36rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(227, 25, 25, 1);
				}
			}
		}
	}
</style>
